<template>
  <div class="ai-canvas">
    <canvas ref="chess" @click="handleClick"></canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ctx: null,
      chessBoard: [], // 棋盘数组
      chessWidth: 15, // 棋盘宽度
      chessHeight: 15, // 棋盘高度
      chessRadius: 20, // 棋子半径
      currentPlayer: 1 // 当前玩家，1为黑棋，2为白棋
    }
  },
  mounted() {
    this.initChessBoard()
    this.drawChessBoard()
  },
  methods: {
    // 初始化棋盘
    initChessBoard() {
      this.chessBoard = new Array(this.chessWidth)
      for (let i = 0; i < this.chessWidth; i++) {
        this.chessBoard[i] = new Array(this.chessHeight).fill(0)
      }
    },
    // 绘制棋盘
    drawChessBoard() {
      const canvas = this.$refs.chess
      this.ctx = canvas.getContext('2d')
      const ctx = this.ctx
      canvas.width = this.chessWidth * this.chessRadius * 2
      canvas.height = this.chessHeight * this.chessRadius * 2

      ctx.strokeStyle = '#bfbfbf'
      for (let i = 0; i <= this.chessWidth; i++) {
        ctx.moveTo(i * this.chessRadius * 2, 0)
        ctx.lineTo(i * this.chessRadius * 2, canvas.height)
        ctx.stroke()
      }
      for (let i = 0; i <= this.chessHeight; i++) {
        ctx.moveTo(0, i * this.chessRadius * 2)
        ctx.lineTo(canvas.width, i * this.chessRadius * 2)
        ctx.stroke()
      }
    },

    // 处理点击事件
    handleClick(e) {
      const canvas = this.$refs.chess
      const rect = canvas.getBoundingClientRect()
      const x = Math.round((e.clientX - rect.left) / (this.chessRadius * 2))
      const y = Math.round((e.clientY - rect.top) / (this.chessRadius * 2))
      if (
        x < 0 ||
        x >= this.chessWidth ||
        y < 0 ||
        y >= this.chessHeight ||
        this.chessBoard[x][y] !== 0
      ) {
        return
      }
      this.drawChess(x, y)
      this.chessBoard[x][y] = this.currentPlayer
      if (this.checkWin(x, y)) {
        // alert(`Player ${this.currentPlayer} wins!`)
        return this.resetGame()
      }
      this.currentPlayer = this.currentPlayer === 1 ? 2 : 1
    },

    // 绘制棋子
    drawChess(x, y) {
      const ctx = this.ctx

      const chessX = x * this.chessRadius * 2
      const chessY = y * this.chessRadius * 2

      ctx.beginPath()
      ctx.arc(chessX, chessY, this.chessRadius, 0, 2 * Math.PI)
      ctx.fillStyle = this.currentPlayer === 1 ? '#000' : '#fff'
      ctx.fill()
      ctx.closePath()
    },

    // 检查是否获胜
    checkWin(x, y) {
      const directions = [
        [1, 0],
        [0, 1],
        [1, 1],
        [1, -1] // 水平、垂直、对角线方向
      ]
      for (const [dx, dy] of directions) {
        let count = 1
        for (let i = 1; i < 5; i++) {
          if (
            this.chessBoard[x + i * dx] &&
            this.chessBoard[x + i * dx][y + i * dy] === this.currentPlayer
          ) {
            count++
          } else {
            break
          }
        }
        for (let i = 1; i < 5; i++) {
          if (
            this.chessBoard[x - i * dx] &&
            this.chessBoard[x - i * dx][y - i * dy] === this.currentPlayer
          ) {
            count++
          } else {
            break
          }
        }
        if (count >= 5) {
          return true
        }
      }
      return false
    },

    // 重新开始
    resetGame() {
      console.log('resetGame-')
      this.initChessBoard()
      this.currentPlayer = 1
      this.drawChessBoard()
    }
  }
}
</script>

<style>
.ai-canvas {
  text-align: center;
}

canvas {
  background-color: #f0d9b5;
  cursor: pointer;
}
</style>
